<template>
  <div class="grid-1-5">
    <h2>{{ title }}</h2>
    <h3 v-if="!isSpecialDeal">
      <sup>{{ currency }}</sup>{{ amount }}<span
        v-if="per.length>0"
        class="small">/{{
        per
      }}</span>
    </h3>
    <h3 v-else>
      {{ specialDealDescription }}
    </h3>
    <p>{{ mainFeature }}</p>
    <ul class="bullet-content">
      <li v-for="(promotion, index) in features"
          :key="index">{{ promotion }}
      </li>
    </ul>
    <button
        class="enter_deal_button"
        @click="enter_deal">
      {{ buttonLabel }}
    </button>
  </div>
</template>

<script>
export default {
  name: "Plan",
  props: {
    title: {
      type: String,
      required: true
    },
    currency: {
      type: String,
      required: false,
      default: "$"
    },
    amount: {
      type: String,
      required: false,
      default: "000"
    },
    per: {
      type: String,
      required: false,
      default: ""
    },
    specialDealDescription: {
      type: String,
      required: false,
      default: "000"
    },
    mainFeature: {
      type: String,
      required: false,
      default: "LET'S TALK"
    },
    isSpecialDeal: {
      type: Boolean,
      required: false,
      default: false
    },
    // eslint-disable-next-line vue/require-valid-default-prop
    features: {
      type: Array,
      required: false,
      default: []
    },
    buttonLabel: {
      type: String,
      required: false,
      default: "Sign Up"
    }
  },
  methods: {
    enter_deal() {
      this.$emit("enter_deal", this.title)
    }
  }
}
</script>
